<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view style="padding-bottom: 80rpx;">
		<view class="sticky-tabs">
			<!-- <me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs> -->
			<view class="padding-tb-sm bg">
				<view class="tui-tabs" style="width: 100%;">
					<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true"
						:show-scrollbar="false">
						<view style="display: flex;width: 100%;white-space: nowrap;overflow-x: auto;">
							<view :key='index' v-for="(item, index) in tabs"
								style="width:30%;margin-left: 16upx;text-align: center" :id="item.id"
								:data-current="index" @tap="tabChange(item)">
								<view class="nameclore" :class="{ 'tui-tab-item-title-active': tabIndex == item.id }">
									{{ item.title }}
								</view>
								<view class="weix" v-if="tabIndex == item.id">
									<image src="../../static/images/index/indexbottom.png"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 数据列表 -->
		<view v-for="(item,index) in goods" :key='index' @click="bindtakeDetail(item.id)">
			<view class="bg margin-lr radius margin-top-sm ">
				<view class="flex justify-between align-center padding-lr padding-top-sm">
					<view>{{item.createTime}}</view>
					<view style="color: #557EFD;" v-if="item.status == 0">待付款</view>
					<view style="color: #557EFD;" v-if="item.status == 1">待接单</view>
					<view style="color: #557EFD;" v-if="item.status == 2">待服务</view>
					<view style="color: #557EFD;" v-if="item.status == 3">进行中</view>
					<view style="color: #557EFD;" v-if="item.status == 4">已完成</view>
					<view style="color: #557EFD;" v-if="item.status == 5">已取消</view>
				</view>
				<view style="border-top: 1rpx solid #F2F2F2;margin-top: 20upx;"></view>
				<view class="flex justify-between text-lg text-bold padding-lr padding-tb-sm">
					<view>{{item.fixedClassifyName}}</view>
					<view style="color: #557EFD;" v-if="item.taskType==1">悬赏任务
						<text class="text-sm">￥</text>
						<text v-if="item.paySumMoney">{{item.paySumMoney}}</text>
						<text v-else>{{item.money}}</text>
					</view>
					<view style="color: #557EFD;" v-if="item.taskType==2">报价任务</view>
					<view style="color: #557EFD;" v-if="item.taskType==3">一口价任务
						<text class="text-sm">￥</text>
						<text v-if="item.paySumMoney">{{item.paySumMoney}}</text>
						<text v-else>{{item.money}}</text>
					</view>
					<view style="color: #557EFD;" v-if="item.taskType==4">师傅任务
						<text class="text-sm">￥</text>
						<text v-if="item.paySumMoney">{{item.paySumMoney}}</text>
						<text v-else>{{item.money}}</text>
					</view>
				</view>
				<view class="padding-lr flex">
					<image :src="item.fixedClassImg" style="width: 149upx;height: 149upx;border-radius: 16upx;">
					</image>
					<view class="margin-left-xs" style="width: 460rpx;">
						<view class="flex " style="color: #999999;">服务地址：{{item.detailsAddress}}</view>
						<view class="flex margin-top-xs" style="color: #999999;">预约时间：<view>{{item.deliveryTime}}
							</view>
						</view>
					</view>
				</view>
				<view style="border-top: 1rpx solid #F2F2F2;margin-top: 30upx;"></view>
				<view class="flex justify-end padding-lr padding-tb-sm align-center">
					<view class="btn margin-right" @click.stop="bindtakeDetail(item.id)" v-if="item.status ==0">去支付
					</view>
					<view class="btn" @click.stop="cancelOrder(item)" v-if="item.status ==1||item.status ==0">取消订单
					</view>

					<view class="btn" @click.stop="deteOrder(item)" v-if="item.status == 5">删除订单</view>
					<view class="btn"
						@click.stop="goNav('/my/order/feedback?indentNumber='+item.orderNo+'&evaluateType=1')"
						v-if="item.status == 4&&item.commentCount!=1">去评价</view>
					<view class="btn margin-left"
						@click.stop="goNav('/my/order/complain?byUserId='+item.helpTake.user.userId+'&platform=3')"
						v-if="item.status == 4">去投诉</view>
					<view class="btn margin-right" v-if="item.status == 3" @click.stop="bindtakeDetail(item.id)">补费
					</view>

					<view class="btn" v-if="item.status == 3" @click.stop="openCode(item)">查看确认码</view>

				</view>
			</view>
		</view>

		<empty v-if="goods.length == 0"></empty>

		<u-popup v-model="show" mode="center" width="500rpx" height="190px" border-radius="14" :closeable="true">
			<view class="padding-lr" style="margin-top: 30upx;">
				<view class="text-lg text-bold margin-bottom">确认码</view>
				<view class="margin-top-xl padding-top text-center text-bold" style="font-size: 48upx;">{{codes}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				show: false,
				codes: '',
				goods: [], // 数据列表
				tabs: [{
					id: 0,
					title: '全部',
					status: ''
				}, {
					id: 1,
					title: '待付款',
					status: '0'
				}, {
					id: 2,
					title: '待接单',
					status: '1'
				}, {
					id: 3,
					title: '待服务',
					status: '2'
				}, {
					id: 4,
					title: '进行中',
					status: '3'
				}, {
					id: 5,
					title: '已完成',
					status: '4'
				}, {
					id: 6,
					title: '已取消',
					status: '5'
				}],
				tabIndex: 0, // tab下标
				game: [],
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
			}
		},
		onLoad(option) {
			uni.getSetting({
				withSubscriptions:true,
				success(res){
					console.log("getSetting",res);
				},
				fail(res){
					console.log("getSetting失败",res);
				}
			})

			if (option.index) {
				this.tabIndex = option.index
			} else {
				this.tabIndex = 0
			}

			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')
		},
		onShow() {
			
			this.goods = []
			this.page = 1
			this.getlist()
		},
		methods: {
			// 接单详情
			bindtakeDetail(id) {

				uni.navigateTo({
					url: '/my/renwu/renwuDetail?id=' + id
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			getlist() {
				this.$queue.showLoading("加载中...");
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit
				}
				this.$Request.get('/app/help/selectCreateHelpOrder', data).then(res => {
					if (res.code == 0) {
						for (let i = 0; i < this.goods.length; i++) {
							if (this.goods[i].gameName) {
								this.goods[i].gameName = this.goods[i].gameName.split(",");
							}
						}
						if (this.page == 1) {
							this.goods = res.data.list;
						} else {
							this.goods = [...this.goods, ...res.data.list]; //追加新数据
						}
					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
			},
			// 切换菜单
			tabChange(tab) {
				this.$queue.showLoading("加载中...");
				this.tabIndex = tab.id
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getlist()
			},
			// 确认码弹框
			openCode(e) {
				this.codes = e.code
				this.show = true

			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								helpOrderId: e.id
							}
							that.$Request.post('/app/help/outHelpOrder', data).then(res => {
								if (res.code == 0) {
									that.page = 1
									that.getlist()
									uni.showToast({
										title: '取消成功,钱款已返回付款账号',
										icon: 'none',
										duration: 1000
									})
								}
							})
						}
					},
				})

			},
			// 删除订单
			deteOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								helpOrderId: e.id
							}
							that.$Request.post('/app/help/deleteHelpOrder', data).then(res => {
								if (res.code == 0) {
									that.page = 1
									that.getlist()
								}
							})
						}
					},
				})

			},
			clickItem: function(options) {
				let data = {
					userId: this.userId,
					focusedUserId: options.ordersUserId,
					userType: 1
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = this.userId == res.data.userId ? res.data.focusedUserId : this.userId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id
						})
					}
				})
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.tabber {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: flex-end;
		height: 127rpx;
	}

	.weix image {
		width: 54upx;
		height: 15upx;
	}

	.nameclore {
		text-align: center;
		font-size: 28upx;
		padding: 0rpx 20rpx;
	}

	.nameclore.tui-tab-item-title-active {
		color: #5E81F9;
		font-size: 30upx;
	}

	.btn {
		background: #5E81F9;
		color: #FFFFFF;
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
	}

	.btn3 {
		background: #557EFD;
		border-radius: 16upx;
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx 10rpx;
		margin-top: 60rpx;
	}
</style>